A mobile productivity app that combines task management, Pomodoro focus sessions, and progress tracking to help users combat procrastination and build better work habits.
Procrastination affects productivity and mental well-being, with users struggling to maintain focus and track meaningful progress toward their goals. Most productivity tools treat task management and focus separately — leaving users to juggle multiple apps with no unified system for building consistent work habits.
Design a system that removes the psychological barrier to beginning a task with low-commitment, time-boxed sessions.
Implement the Pomodoro Technique — 25-minute intervals backed by research — as the core interaction model.
Give users a clear view of their productivity patterns through a stats dashboard that reinforces momentum.
Introduce achievement mechanics that celebrate milestones and build the habit loop through immediate positive feedback.
The primary audience includes students, freelancers, and remote workers who need structure in their workday but lack external accountability. These users value flexibility but struggle with self-discipline when working independently.
Research validates that 25-minute focused intervals significantly improve concentration and reduce mental fatigue. Long enough for deep work, short enough to feel achievable.
While many timer apps and task managers exist separately, few combine both with meaningful progress tracking. The opportunity was an integrated experience addressing the full productivity workflow.
Difficulty maintaining focus for extended periods, lack of a structured approach to task management, no visibility into productivity patterns, and no motivational reinforcement.
Productivity happens everywhere — coffee shops, libraries, commutes. A mobile-first approach ensures users can maintain their focus routine regardless of location.
Identified core features to support the full productivity workflow: authentication for data persistence, task management for planning, a timer for execution, and stats for reflection.
Navigation is built around a three-tab system — Tasks, Timer, and Stats — keeping the primary workflow front and center. A hamburger menu houses secondary features: My Goals, Achievements, Streak History, Profile Settings, and Preferences. The focus session is always one tap away.
Initially explored purple-pink gradients for a modern, energetic feel. After review, pivoted to flat #5271FF blue for better readability and a more focused, professional aesthetic.
Selected DM Sans for the wordmark — varied weights (300 for "focus", 400 for "flow") create visual rhythm while maintaining cohesion. The hourglass logo symbolizes time management and continuous momentum.
The design system was built around calm clarity. Flat Electric Blue (#5271FF) as the primary color is psychologically associated with trust, stability, and focus — ideal for a productivity tool. Burnt Orange provides motivational contrast for achievement states.
Electric Blue
#5271FF
Burnt Orange
#E05C2A
Deep Navy
#0B1628
Off White
#F4F7FF
Tasks are added via a quick-entry field directly on the dashboard. The empty state prompts immediate action — no onboarding friction before users can get to work.
Focus and Break modes with Start and Reset controls. A Settings modal offers manual duration input plus three Quick Presets — Classic (25/5), Long (50/10), and Short (15/3) — so users can match the app to how they actually work.
A four-tile dashboard shows Tasks Completed, Focus Sessions, Minutes Today, and Day Streak. A Daily Goal tracker (0/4 sessions) gives users a concrete daily target rather than open-ended data.
Toast notifications celebrate completed sessions immediately. Streak tracking encourages daily consistency through visible long-term progress.
Every screen — Tasks, Timer, Stats, and Menu — is fully themed. Toggled via the sun/moon icon in the header without interrupting the active session.
A motivational quote anchors the bottom of every screen — reinforcing tone and encouraging users without competing with the primary interface.
While gradients feel modern, they compete for attention during focus sessions. Flat #5271FF creates a calmer aesthetic that doesn't distract from the user's work.
Behavioral psychology shows that immediate positive reinforcement strengthens habit formation. Toast notifications provide the instant feedback loop that makes users more likely to return.
The three-tab bar (Tasks, Timer, Stats) keeps the core workflow always visible. The hamburger handles everything else — Goals, Achievements, Preferences — without cluttering the primary interface. Focus first, configure second.
Full dark mode reduces eye strain during extended focus sessions. Toggled via the sun/moon icon in the header — accessible from any screen without breaking the user's flow.
Not every user works in 25-minute blocks. Classic (25/5), Long (50/10), and Short (15/3) presets let users match the app to their working style without manual entry — lowering the barrier to starting.
The 0/4 sessions tracker gives users a concrete daily target. Rather than open-ended data, it creates a finish line — reinforcing the habit loop with a clear sense of completion each day.
Focus Flow successfully integrates authentication, task management, timer functionality, and statistics into a cohesive experience. The result feels like one unified tool rather than separate features bolted together.
The pivot from gradient to flat blue was a valuable lesson — what looks impressive in isolation may not serve users best in practice. Simpler design better supports the app's core purpose. Given more time, I'd add advanced analytics (weekly trends, productivity heatmaps) and calendar integration to sync focus sessions with scheduled tasks.
Ready to see more of my work?